<script setup lang="ts">
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
import AuthForgotPassword from "@/components/auth/AuthForgotPassword.vue";
import {definePage} from "unplugin-vue-router/runtime";
import {GalleryVerticalEndIcon} from "lucide-vue-next";

// todo: use blank layout
definePage({
  meta: {
    layout: "blank",
  },
})
</script>

<template>
  <div class="flex flex-col items-center justify-center gap-6 bg-muted p-6 min-h-svh md:p-10">
    <div class="max-w-sm w-full flex flex-col gap-6">
      <RouterLink to="#" class="flex items-center self-center gap-2 font-medium">
        <div class="h-6 w-6 flex items-center justify-center rounded-md bg-primary text-primary-foreground">
          <Component :is="GalleryVerticalEndIcon" class-name="size-4"/>
        </div>
        Acme Inc.
      </RouterLink>
      <Card>
        <CardHeader class="text-center">
          <CardTitle class="text-xl">
            Forgot Password
          </CardTitle>
          <CardDescription>
            Enter your email below to reset your password
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div class="grid mx-auto max-w-sm gap-6">
            <AuthForgotPassword/>
            <p class="text-center text-sm text-muted-foreground">
              Already have an account?
              <RouterLink
                  to="/auth/login"
                  class="underline underline-offset-4 hover:text-primary"
              >
                Login
              </RouterLink>
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  </div>
</template>

<style scoped>

</style>
